<div id="blocks_page" class="page">
  <section class="content-header">
    <h1 data-i18n="blocks">Blocks</h1>
    <div style="position:absolute;top:9px;right:9px;">
      <div class="btn-group" data-toggle="buttons" id="blocks_page_type">
        <label class="btn btn-default active" data-type="">
        <input type="radio" name="blocks_page_type"> <span data-i18n="all_blocks">All Blocks</span>
        </label>
        <label class="btn btn-default" data-type="forged_blocks">
        <input type="radio" name="blocks_page_type"> <span data-i18n="forged_by_you">Forged By You</span>
        </label>
      </div>
    </div>
  </section>
  <section class="content">
    <div class="row">
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-aqua">
          <div class="inner inner-smaller">
            <h3><span id="blocks_average_amount" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="avg_amount_per_block">Avg. Amount Per Block</p>
          </div>
          <div class="icon" style="bottom:-14px"><i class="ion ion-stats-bars"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6">
        <div class="small-box bg-green">
          <div class="inner inner-smaller">
            <h3><span id="blocks_average_fee" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="avg_fee_per_block">Avg. Fee Per Block</p>
          </div>
          <div class="icon" style="bottom:-12px"><i class="ion ion-paperclip"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6" id="blocks_transactions_per_hour_box">
        <div class="small-box bg-yellow">
          <div class="inner inner-smaller">
            <h3><span id="blocks_transactions_per_hour" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="transactions_per_hour">Transactions Per Hour</p>
          </div>
          <div class="icon"><i class="fas fa-truck-moving"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6" id="blocks_generation_time_box">
        <div class="small-box bg-red">
          <div class="inner inner-smaller">
            <h3><span id="blocks_average_generation_time" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="block_generation_time">Block Generation Time</p>
          </div>
          <div class="icon"><i class="ion ion-clock"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6" id="forged_blocks_total_box">
        <div class="small-box bg-yellow">
          <div class="inner inner-smaller">
            <h3><span id="forged_blocks_total" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="nr_forged_blocks"># Forged Blocks</p>
          </div>
          <div class="icon"><i class="fas fa-list-alt"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
      <div class="col-lg-3 col-xs-6" id="forged_fees_total_box">
        <div class="small-box bg-red">
          <div class="inner inner-smaller">
            <h3><span id="forged_fees_total" id="loading_dots"><span>.</span><span>.</span><span>.</span></span></h3>
            <p data-i18n="forged_fees_total">Forged Fees Total</p>
          </div>
          <div class="icon"><i class="fas fa-briefcase"></i></div>
          <div class="small-box-footer"></div>
        </div>
      </div>
    </div>
    <div class="data-container data-loading">
      <table class="table table-striped" id="blocks_table">
        <thead>
          <tr>
            <th data-i18n="height">Height</th>
            <th data-i18n="date">Date</th>
            <th data-i18n="amount">Amount</th>
            <th data-i18n="fee">Fee</th>
            <th data-i18n="nr_tx">Nr TX</th>
            <th data-i18n="generator">Generator</th>
            <th data-i18n="payload">Payload</th>
            <th data-i18n="base_target">Base Target</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
      <div class="data-loading-container"><i class="fas fa-circle-notch fa-spin fa-3x" style="display: block;"></i></div>
      <div class="data-empty-container" data-i18n="no_blocks_found">No blocks found.</div>
    </div>
  </section>
</div>